머티리얼 디자인
최근 수정 시각: (5년 전)
1. 개요 [편집]
Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.머티리얼 디자인은 이론, 자원 및 디지털 경험을 만드는 도구를 결합한 통합 시스템입니다.
구글이 제창하여 2014년도부터 이용되기 시작한 플랫 디자인 기반의 디자인 메뉴얼.
2. 상세 [편집]
기존의 안드로이드의 UX가 iOS에 비해 너무 밋밋하고 공대감성적이다는 의견과 모바일 뿐만 아니라 다른 기기에서 통일성 있는 사용자 경험을 제공하고자 개발되었다. 미니멀리즘을 추구하여 기존의 플랫한 디자인에 입체감과 원근감을 주는 방향으로 개발되었다. 즉 플랫 디자인의 개량형이다.
그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.
안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.
19년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]
그냥 보면 별 차이가 안 느껴질 수도 있지만, 플랫 디자인이 그냥 2차원적인 평면 느낌이라는 것과 달리, 머티리얼 디자인은 그림자 등이 약간씩 있고, 한 면 위에 다른 면이 덮인다던가 어떤 면을 걷어내면서 새로운 면이 나오는 것과 같은 전환 효과를 구현하면서 조금의 입체감이 추가된 3차원이라는 느낌이 적용되었다.
안드로이드 5.0 롤리팝부터 각 기기에 적용되었으며, 구글이 개발한 앱 뿐만 아니라 페이스북과 같은 타사 앱들도 점차 이 가이드라인을 따라 앱을 리뉴얼/개발하고 있다.
19년 기준으로도 깔끔하게 딱 필요한 만큼의 시각적 정보와 미적 요소를 제공하는 머티리얼 디자인은 UI 디자인의 교과서로 쓰인다. 이 디자인이 대세로 등극하면서 반사광과 원형 도형 등 과도한 정보를 삽입해 UI를 사실적으로 구현한 스큐어모피즘 디자인은 한물 간 디자인으로 취급당하게 되었다.[1]
스큐어모피즘, 플랫, 머티리얼 디자인의 차이 |
3. 컬러 팔레트 [편집]
머티리얼 디자인에서 제공하는 색상 팔레트가 있다. 컬러 툴 사이트를 사용하면 UI의 메인 컬러로 정해졌을 때의 전체적인 색 느낌을 볼 수 있다. 사이트에서 팔레트에 있는 정해진 색 말고도 커스텀 색으로 고를 수 있긴 하다.
아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.
색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다.
아래는 머티리얼 디자인에서 사용하는 색 팔레트를 표로 나타낸 것이다. 색의 배경에 따라 글씨색이 검은색(#000)과 흰색(#FFF)으로 다른데, 저시력자를 위한 최소 대비에 맞도록 머티리얼 디자인에서 권장하는 글씨 색으로 나무위키에서 표를 만들 때 참고해도 도움이 된다. 색에 따른 정확한 판독성(legibility)을 확인하고 싶다면, 위의 컬러 툴 사이트에서 상단 Accessibility 탭에 들어가면 선택한 색을 배경으로 사용했을때 각종 텍스트의 판독성에 관한 다양한 정보를 볼 수 있다.
색 이름은 맨위의 영어 이름과 숫자를 합쳐서 읽는다. 예를들어 Blue 300은 #64B5F6이다.
Red | Pink | Purple | Deep Purple | Indigo | Blue | Light Blue | Cyan | |
50 | #FFEBEE | #FCE4EC | #F3E5F5 | #EDE7F6 | #E8EAF6 | #E3F2FD | #E1F5FE | #E0F7FA |
100 | #FFCDD2 | #F8BBD0 | #E1BEE7 | #D1C4E9 | #C5CAE9 | #BBDEFB | #B3E5FC | #B2EBF2 |
200 | #EF9A9A | #F48FB1 | #CE93D8 | #B39DDB | #9FA8DA | #90CAF9 | #81D4FA | #80DEEA |
300 | #E57373 | #F06292 | #BA68C8 | #9575CD | #7986CB | #64B5F6 | #4FC3F7 | #4DD0E1 |
400 | #EF5350 | #EC407A | #AB47BC | #7E57C2 | #5C6BC0 | #42A5F5 | #29B6F6 | #26C6DA |
500 | #F44336 | #E91E63 | #9C27B0 | #673AB7 | #3F51B5 | #2196F3 | #03A9F4 | #00BCD4 |
600 | #E53935 | #D81B60 | #8E24AA | #5E35B1 | #3949AB | #1E88E5 | #039BE5 | #00ACC1 |
700 | #D32F2F | #C2185B | #7B1FA2 | #512DA8 | #303F9F | #1976D2 | #0288D1 | #0097A7 |
800 | #C62828 | #AD1457 | #6A1B9A | #4527A0 | #283593 | #1565C0 | #0277BD | #00838F |
900 | #B71C1C | #880E4F | #4A148C | #311B92 | #1A237E | #0D47A1 | #01579B | #006064 |
A100 | #FF8A80 | #FF80AB | #EA80FC | #B388FF | #8C9EFF | #82B1FF | #80D8FF | #84FFFF |
A200 | #FF5252 | #FF4081 | #E040FB | #7C4DFF | #536DFE | #448AFF | #40C4FF | #18FFFF |
A400 | #FF1744 | #F50057 | #D500F9 | #651FFF | #3D5AFE | #2979FF | #00B0FF | #00E5FF |
A700 | #D50000 | #C51162 | #AA00FF | #6200EA | #304FFE | #2962FF | #0091EA | #00B8D4 |
Teal | Green | Light Green | Lime | Yellow | Amber | Orange | Deep Orange | |
50 | #E0F2F1 | #E8F5E9 | #F1F8E9 | #F9FBE7 | #FFFDE7 | #FFF8E1 | #FFF3E0 | #FBE9E7 |
100 | #B2DFDB | #C8E6C9 | #DCEDC8 | #F0F4C3 | #FFF9C4 | #FFECB3 | #FFE0B2 | #FFCCBC |
200 | #80CBC4 | #A5D6A7 | #C5E1A5 | #E6EE9C | #FFF59D | #FFE082 | #FFCC80 | #FFAB91 |
300 | #4DB6AC | #81C784 | #AED581 | #DCE775 | #FFF176 | #FFD54F | #FFB74D | #FF8A65 |
400 | #26A69A | #66BB6A | #9CCC65 | #D4E157 | #FFEE58 | #FFCA28 | #FFA726 | #FF7043 |
500 | #009688 | #4CAF50 | #8BC34A | #CDDC39 | #FFEB3B | #FFC107 | #FF9800 | #FF5722 |
600 | #00897B | #43A047 | #7CB342 | #C0CA33 | #FDD835 | #FFB300 | #FB8C00 | #F4511E |
700 | #00796B | #388E3C | #689F38 | #AFB42B | #FBC02D | #FFA000 | #F57C00 | #E64A19 |
800 | #00695C | #2E7D32 | #558B2F | #9E9D24 | #F9A825 | #FF8F00 | #EF6C00 | #D84315 |
900 | #004D40 | #1B5E20 | #33691E | #827717 | #F57F17 | #FF6F00 | #E65100 | #BF360C |
A100 | #A7FFEB | #B9F6CA | #CCFF90 | #F4FF81 | #FFFF8D | #FFE57F | #FFD180 | #FF9E80 |
A200 | #64FFDA | #69F0AE | #B2FF59 | #EEFF41 | #FFFF00 | #FFD740 | #FFAB40 | #FF6E40 |
A400 | #1DE9B6 | #00E676 | #76FF03 | #C6FF00 | #FFEA00 | #FFC400 | #FF9100 | #FF3D00 |
A700 | #00BFA5 | #00C853 | #64DD17 | #AEEA00 | #FFD600 | #FFAB00 | #FF6D00 | #DD2C00 |
Brown | Grey | Blue Grey | |
50 | #EFEBE9 | #FAFAFA | #ECEFF1 |
100 | #D7CCC8 | #F5F5F5 | #CFD8DC |
200 | #BCAAA4 | #EEEEEE | #B0BEC5 |
300 | #A1887F | #E0E0E0 | #90A4AE |
400 | #8D6E63 | #BDBDBD | #78909C |
500 | #795548 | #9E9E9E | #607D8B |
600 | #6D4C41 | #757575 | #546E7A |
700 | #5D4037 | #616161 | #455A64 |
800 | #4E342E | #424242 | #37474F |
900 | #3E2723 | #212121 | #263238 |
4. 아이콘 [편집]
파일:머티리얼 디자인 아이콘.png
머티리얼 디자인 아이콘
아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.
머티리얼 디자인 아이콘
아이콘 세트를 오픈소스로 공개하고 있다. 종류도 많고 아이콘 스타일도 Filled, Outlined, Rounded, Two-Tone, Sharp로 5개씩이나 있기 때문에 디자이너들이 자주 사용한다. 또한 아이콘들이 전체적으로 굵은 선을 사용했기 때문에 작아져도 모양이 덜 일그러진다.
5. 기타 [편집]
안드로이드 스튜디오가 도입된 이후 애플리케이션 디자인의 통합된 가이드라인을 제시하고 있지만 굳이 안드로이드 뿐만이 아니라 웹 사이트 개발을 하는데 있어 디자인이 자신이 없다거나 부트스트랩 프레임워크가 질린다면 머티리얼라이즈 프레임워크를 적용해 사이트를 개발하는 방법도 있다. 머티리얼라이즈 프레임워크의 전반적인 디자인이 머티리얼 디자인과 매우 유사하다.
6. 링크 [편집]
라이선스를 별도로 명시하지 않은 문서는 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다.
기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권을 갖습니다.
문서의 기여자는 역사 탭에서 확인할 수 있습니다.
접두어의 N: - 나무위키 사용자, R: - 리그베다 위키의 사용자를 뜻합니다.
자세한 사항은 나무위키에서 동일한 문서의 역사를 참고하시기 바랍니다.